<template>
  <div>
    <el-card>
      <h5>商品添加</h5>
      <div style="margin: 20px 5px">
        <p style="margin: 0 5px">
          商品名称
          <el-input
            placeholder="请输入内容"
            v-model="name"
            style="width: 300px; margin-left: 10px"
            size="mini"
            clearable
          >
          </el-input>
        </p>
        <p style="margin: 15px 5px">
          商品选择
          <el-select
            style="margin-left: 10px"
            v-model="value"
            clearable
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="(e, i) in options[0]"
              :key="i"
              :value="e.cateName"
            >
            </el-option>
          </el-select>
        </p>
        <p style="margin: 0 5px">
          商品价格
          <el-input-number
            style="margin-left: 10px"
            v-model="parice"
            :min="1"
            label="描述文字"
            size="mini"
          ></el-input-number>
        </p>
        <p style="margin: 15px 5px">
          商品图片
          <el-upload
            style="margin-left: 10px"
            class="avatar-uploader"
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
          >
            <img style="width:120px;height:120px;" v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </p>
        <p style="margin: 15px 5px">
          商品描述<el-input
            type="textarea"
            style="width: 300px; margin-left: 10px"
            size="mini"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </p>
        <p>
          <el-button type="primary" class="addBtn" size="mini" @click="additemclick"
            >添加商品</el-button
          >
        </p>
      </div>
    </el-card>
  </div>
</template>
                
<script>
import { categories ,additem} from "@/apis/items";
export default {
  data() {
    return {
      imageUrl:'',//回显的图片
      name: "",
      textarea: "",
      parice: 1,
      options: [],
      value: "",
    };
  },
  methods: {
    // 图片上传后的函数
    handleAvatarSuccess(res,file){
      this.newimg=res.imgUrl
       this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 点击确认添加
    additemclick(){
      additem({name:this.name,category:this.value,price:this.parice,imgUrl:this.newimg,goodsDesc:this.textarea})
      .then(res=>{
         this.$message({
          message:res.data.msg,
          type: 'success'
        });
      })
    }
  },
  created() {//查询所有分类名称
    categories().then((res) => {
      for (const key in res.data) {
        this.options.push(res.data[key]);
      }
    });
  },
};
</script>

<style lang="less" scoped>
.avatar{
  width:120px;
  height:120px;
}
h5 {
  font-weight: normal;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  line-height: 30px;
}
.avatar-uploader,
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120;
  height: 120;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  text-align: center;
  display: block;
}
p {
  display: flex;
  font-size: 14px;
  color: rgb(87, 82, 82);
}
.addBtn {
  margin-left: 72px;
}
.avatar-uploader{
  width:120px;
  height:120px;
}
</style>